import React from 'react';

import { connect } from 'react-redux';

import HeaderBar from '../components/headerbar';
import SortBar from '../components/sortbar';
import Articles from '../components/articles';
import Loadmore from '../components/loadmore';
import { hashHistory } from 'react-router';

import { selectArticle, initSelectArticle } from '../actions/article';

class SearchPage extends React.Component {

    constructor(props) {
        super(props);
        
        this.state = {
            channel: this.props.params.channel,
            sort: this.props.params.sort,
            q: ''
        }
    }

    componentDidMount() {
        if (this.props.params.query) {
            let str = decodeURI(this.props.params.query);
            this.setState({
                q: str
            });
            let iPage = parseInt(this.props.params.page);
            this.props.selectArticle(str, iPage, this.props.params.channel, this.props.params.sort);
        } else {
            this.props.initSelectArticle();
        }
    }

    menuHandler(id) {
        this.setState({
            channel: id,
            sort: "0"
        });
        hashHistory.push("searchpage/"+id+"/1/0");
        this.props.initSelectArticle();
        
        var leftMenu = $("#leftBar");
        var sidebar = $(".sidebar");
    	sidebar.removeClass("fa-arrow-left").addClass("fa-arrow-right");
    		sidebar.removeClass("fa-arrow-left").addClass("fa-arrow-right");
            $("#rightBar").hide();
            leftMenu.hide();
    }

    sortHandler(id) {
        this.setState({
            sort: id
        });
        let str = encodeURI(this.state.q);
        let iPage = parseInt(this.props.params.page);
        hashHistory.push("searchpage/"+this.props.params.channel+"/"+this.props.params.page+"/"+id+"/"+str);
        this.props.selectArticle(this.state.q, iPage, this.props.params.channel, id);
    }

    handleLoad(page) {
        let iPage = parseInt(page);
        this.props.selectArticle(this.state.q, iPage  ,this.props.params.channel,0);
        let str = encodeURI(this.state.q);
        hashHistory.push("searchpage/"+this.props.params.channel+"/"+(iPage )+"/"+0+"/"+str);
    }

    searchBtn(query) {
        this.props.selectArticle(query, 1, this.props.params.channel,0);
        this.setState({
            q: query
        });
        let str = encodeURI(query);
        hashHistory.push("searchpage/"+this.props.params.channel+"/1/0/"+str);
    }

    render() {
        let channel = 0;
        if (this.state.channel !== undefined) {
            channel = this.state.channel;
        } 

        let channels = [];
        if (this.props.channels !== undefined) {
            channels = this.props.channels;
        } else if (sessionStorage.channels !== undefined) {
            channels = JSON.parse(sessionStorage.channels);
        }

        let articles = [];
        let articleDiv = (<div style={{position: "absolute",height: "100%",width: "100%",fontSize: "2rem",color: "#e6e6e6",textAlign: "center",paddingTop: "30%"}}>{this.props.params.query==undefined||this.props.params.query.length<=0 ? "搜索点什么？":"对不起，没有获得匹配的结果。"}</div>);
        if (this.props.articles !== undefined && this.props.articles.length > 0) {
            articles = this.props.articles;
            articleDiv = (<Articles isSearch={true} articles={articles}/>)
        } 
        return(
            <div>
                <HeaderBar searchFunc={this.searchBtn.bind(this)} searchText={this.state.q} sort={ this.state.sort } channel={channel} channels={channels} menuHandler={this.menuHandler.bind(this)} sortHandler={this.sortHandler.bind(this)}/>
                { articleDiv }
                { articles.length > 0 && <Loadmore page={this.props.page} defaultPageSize={articles.length} pageCount={(articles.length * this.props.pageCount)} handleLoad={this.handleLoad.bind(this)} pageChange={this.handleLoad.bind(this)}/>}
            </div>
        );
    }
}

function mapStateToProps(state) {
    return { 
        articles: state.article.articles ,
        channels: state.home.channels,
        page: state.article.page,
        pageCount: state.article.pageCount
    };
}

export default connect(mapStateToProps, { initSelectArticle, selectArticle })(SearchPage);
// export default SearchPage;